<script setup>
    // 引入echarts的所有组件
    import Total from "@/components/chart/Total.vue";
    import Earnings from "@/components/chart/Earnings.vue";
    import CategoryCount from "@/components/chart/CategoryCount.vue";
    import InventoryCount from "@/components/chart/InventoryCount.vue";
</script>

<template>
    <div class="container">
        <el-row >
            <el-col :span="8">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 500px">
                            <CategoryCount></CategoryCount>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 250px">
                            <InventoryCount></InventoryCount>
                        </div>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="16">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 250px">
                            <Total></Total>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 500px">
                            <Earnings></Earnings>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
    .container{
        /* background-image: radial-gradient(50% 50% at 50% 70%, #545C64, #1A232A); */
        /* border: 1px solid #01093D; */
        min-height: 100%;
        background-color: #F5F5F5;

    }
    .container>.el-row{
        /* background-color: #FFF; */
        padding: 15px;
    }
    .title{
        text-align: center;
        color: #1A232A;
        /* font-weight: bold; */
        font-size: 36px;
        /* background-color: #091440; */
    }
    .el-col .el-col{
        background-color: #FFF;
        /* border: 1px solid #58A6FE; */
        border-radius: 5px;
    }
    .el-row .el-row {
        margin-bottom: 15px;
        margin-right: 15px;
    }

</style>